import { useRequest } from 'ahooks'
import { useEffect } from 'react'
import { useState } from 'react'
import { Http } from '../../../../Common/Api'
import './Scss/MonitoringList.scss'

export const MonitoringList001 = () => {
    const flexList = [4, 2, 2]

    const [Title] = useState([
        { uuid: '1', title: '名称' },
        { uuid: '2', title: '类型' },
        { uuid: '3', title: '位置' },
        // { uuid: '4', title: '状态' },
    ])

    const [CameraList, setCameraList] = useState([])
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => setCameraList(res),
    })

    useEffect(() => {
        runAsync({ url: 'getCameraSimpleCameraList' })
    }, [runAsync])

    return (
        <div className="MonitoringList001">
            <div className="Title">
                {Title.map(({ uuid, title }, index) => (
                    <div key={uuid} style={{ flex: flexList[index] }}>
                        {title}
                    </div>
                ))}
            </div>
            <div className="List">
                {CameraList.map(({ uuid, cameraPositionName, cameraTypeName, tableName, warningMessage }) => (
                    <div key={uuid}>
                        <div style={{ flex: flexList[0] }}>{tableName}</div>
                        <div style={{ flex: flexList[1] }}>{cameraTypeName}</div>
                        <div style={{ flex: flexList[2] }}>{cameraPositionName}</div>
                        {/* <div style={{ flex: flexList[3] }}>{warningMessage}</div> */}
                    </div>
                ))}
            </div>
        </div>
    )
}
